<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no"/>
    <meta name="format-detection" content="email=no"/>
    <title>圈子详情</title>
    <link rel="stylesheet" href="../../css/api.css">
    <link rel="stylesheet" href="../../css/vant.css">
    <link rel="stylesheet" href="../../css/main.css">
    <style>
        .van-field__body textarea {
            width: 3.51rem;
            height: 1.36rem !important;
            border-radius: .05rem;
            padding: .1rem 0;
        }

        .info > img {
            border-radius: 50%;
        }

        .dynamic .dynamic-f3 .videoStyle {
            width: 1rem;
            height: 1rem;
        }

        .dynamic .dynamic-f3 .doubleImg {
            width: 2rem;
            height: 2rem;
        }
        .dynamic-f3 .iconfont img{
            width: .5rem;
            height: .5rem;
        }
        .video_box {
            position: relative;
            margin-right: .1rem;
            margin-bottom: .1rem;
        }

        .video_box .playIcon {
            color: #3F8CEC;
            font-size: .5rem;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>

<body>
<div class="app" v-cloak @click="hideInput">
    <!-- 详情 -->
    <div class="dynamic">
        <div class="dynamic-f1 flex-x-sb">
            <div class="info flex-x-s">
                <img :src="newsDetail.topic.headImg?newsDetail.topic.headImg:'https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/circle/man-avatar.png'"
                     alt="">
                <div class="name">
                    <div>{{newsDetail.topic.nickName}}</div>
                    <div class="datetime">{{newsDetail.topic.publishTime}}</div>
                </div>
            </div>
            <div class="follow" v-if="newsDetail.topic.attentionFlag !== -1"
                 :class="{followed:newsDetail.topic.attentionFlag}" @click="doFollow(newsDetail.topic)">
                {{newsDetail.topic.attentionFlag?'已关注':'关注ta'}}
            </div>
        </div>
        <div class="dynamic-f2">
            {{newsDetail.topic.content}}
        </div>
        <div class="dynamic-f3 flex-x-s flex-wrap">
            <div v-for="(it,idx) in newsDetail.topic.medias" :key="idx" class="flex-x-c">
                <div class="video_box videoStyle"
                     :class="{doubleImg:newsDetail.topic.medias && newsDetail.topic.medias.length===1}"
                     v-if="it.mediaType === '0'">
                    <img :src="it.imagePath" alt=""
                         :class="{doubleImg:newsDetail.topic.medias && newsDetail.topic.medias.length===1}"
                         @click="preview(idx,newsDetail.topic.medias)">
                </div>
                <div v-if="it.mediaType === '1'" class="video_box videoStyle" :id="'imagePath'+idx"
                     :class="{doubleImg:newsDetail.topic.medias && newsDetail.topic.medias.length===1}"
                     @click="videoPreview(it, idx)">
                    <img :src="it.imagePath" alt=""
                         :class="{doubleImg:newsDetail.topic.medias && newsDetail.topic.medias.length===1}">
                    <span class="iconfont playIcon">
                        <img src="https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/playV.png" alt="">
                    </span>
                </div>
            </div>
        </div>
        <div class="dynamic-f4"></div>
        <div class="dynamic-f5 flex-x-s">
            <div class="comment flex-x-s">
                <img src="https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/comment.png" alt="">
                <span>{{newsDetail.topic.commentNumber == 0 ? '评论' : newsDetail.topic.commentNumber}}</span>
            </div>
            <div class="flex-x-s thumb" @click.stop="doThumb(newsDetail.topic)">
                <img :src="newsDetail.likeFlag?'https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/thumb_active.png' : 'https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/thumb_no.png'" alt="">
                <span>{{newsDetail.topic.likeNumber == '0' ? '点赞' : newsDetail.topic.likeNumber}}</span>
            </div>
        </div>
    </div>
    <!-- 评论 -->
    <div class="dynamic-detail-comment" v-if="newsDetail.topicComments.length>0">
        <div class="title">评论</div>
        <div class="dynamic-detail-item flex-x-s-s" v-for="(comment,index) in newsDetail.topicComments" :key="index">
            <img :src="comment.headImg?comment.headImg:'https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/circle/man-avatar.png'" alt="">
            <div class="detail-txt">
                <div class="name"> {{comment.nickName}}</div>
                <div class="datetime">{{comment.publishTime}}</div>
                <div class="content" @click.stop="doWrite(comment)">
                    {{comment.content}}
                </div>
                <div class="reply_box">
                    <div class="reply" @click.stop="doWrite(comment,item)" v-for="item in comment.childTopicComments">
                        <span @click.stop="doWrite(comment,item,item.userId,item.nickName)">{{item.nickName}}</span>
                        <span style="color: black">回复</span>
                        <span @click.stop="doWrite(comment,item,item.toUserId,item.toNickName)">{{item.toNickName}}</span>
                        <span style="color: black">: </span>
                        {{item.content}}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 写评论 -->
    <div class="dynamic_detail_write flex-x-s iphonex-padding-bottom" @click.stop="doWrite()">
        <input type="text" placeholder="你确定不说点什么吗…" maxlength="500"  readonly>
        <div class="send_btn">发送</div>
    </div>
</div>
<script src="../../script/api.js"></script>
<script src="../../script/flexible.js"></script>
<script src="../../script/fastclick.js"></script>
<script src="../../script/vue.min.js"></script>
<script src="../../script/iconfont.js"></script>
<script src="../../script/vant.min.js"></script>
<script src="../../script/common.js"></script>
<script src="../../script/businessCommon.js"></script>
<script src="../../script/restful.js"></script>
<script src="../../script/BigPicture.js"></script>
<script>
    apiready = function () {
        var inputField = api.require('inputField');
        var vm = new Vue({
            el: '.app',
            data: {
                topicId: api.pageParam.topicId,
                newsDetail: {
                    topic: {attentionFlag: -1},
                    topicComments: []
                },
                viodePreview: null
            },
            created() {

            },
            mounted() {
                if (api.pageParam.topic) {
                    this.newsDetail.topic = api.pageParam.topic;
                }
                this.initDetail();
                this.video = this.$refs.video
            },
            methods: {

                preview(index, medias) {
                    var photoBrowser = api.require('photoBrowser');
                    previewPhoto(index, medias, photoBrowser)
                },

                doFollow(item) {
                    var vm = this;
                    circle("doFollow")(item, function () {
                        vm.initDetail();
                        vm.newsDetail.topic.attentionFlag = !vm.newsDetail.topic.attentionFlag;
                        vm.sendAtt(vm.newsDetail.topic.attentionFlag)
                    })
                },
                doThumb(item) {
                    console.log(JSON.stringify(item))
                    var vm = this;
                    circle("doThumb")(item, function () {
                        vm.initDetail();
                        vm.newsDetail.topic.likeFlag = !vm.newsDetail.topic.likeFlag;
                        if (vm.newsDetail.topic.likeFlag === true) {
                            vm.newsDetail.topic.likeNumber += 1;
                            toastMiddle('点赞成功')
                            vm.sendUpdate()
                        } else {
                            vm.newsDetail.topic.likeNumber -= 1;
                            toastMiddle('取消点赞')
                            vm.sendUpdate()
                        }
                    })

                },
                initDetail() {
                    var vm = vm || this;
                    fnGet(interfaces.CONTENT_MODULE.CIRCLE.GET_NEWDETAIL + "/" + vm.topicId, {}, false,
                        function (ret, err) {
                            if (ret && ret.code === RESPONSE_OK) {
                                console.log(JSON.stringify(ret.data));
                                vm.newsDetail = ret.data;
                                // vm.newsDetail.topicComments = ret.data.topicComments;
                                // console.log('评论：',JSON.stringify(vm.newsDetail.topicComments));
                            } else {
                                toastBottom(ret ? ret.msg : '');
                            }
                        }
                    );
                },
                hideInput() {
                    inputField.close();
                    inputField.resignFirstResponder();
                },
                doWrite(comment, childComment, toUserId, toNickName) {
                    if(!checkToken()) return false;
                    let vm = this
                    let item = {}
                    if (comment) {
                        item = {
                            topicId: vm.topicId,
                            toUserId: comment.userId,
                            topicCommonId: comment.topicCommonId,
                            nickName: comment.nickName
                        }
                        if (childComment) {
                            item.topicCommonId = comment.topicCommonId
                            item.toUserId = childComment.toUserId
                            item.nickName = childComment.nickName
                        }
                        if (toUserId) {
                            item.toUserId = toUserId
                        }
                        if (toNickName) {
                            item.nickName = toNickName
                        }
                    } else {
                        item = {
                            topicId: vm.topicId,
                            toUserId: undefined,
                            topicCommonId: undefined,
                            nickName: ''
                        }
                    }
                    var tempName = item.nickName;
                    if (item.nickName !== '请输入') {
                        tempName = '回复' + item.nickName + ':'
                    }
                    inputField.open({
                        bgColor: '#f7f7f7',
                        lineColor: '#f7f7f7',
                        fileBgColor: '#fff',
                        borderColor: '#fff',
                        sendBtn: {
                            bg: '#3F8CEC', //字符串类型；发送按钮常态背景色
                            inputBg: '#3F8CEC', //(可选项)字符串类型；当输入文字发时送按钮的背景色；默认：bg的色值
                            bgHighlight: '#000', //字符串类型；发送按钮点击时的高亮背景色
                            title: '发送', //字符串类型；发送按钮的标题
                            titleSize: 13, //数字类型；发送按钮的标题字体大小
                            titleColor: '#fff', //字符串类型；发送按钮标题文字颜色
                            corner: 5, //数字类型；发送按钮圆角大小
                            sendW: 45, //数字类型；发送按钮的宽
                            sendH: 30, //数字类型；发送按钮的高
                            marginRight: 10, //数字类型；发送按钮距离屏幕右边的距离，本参数暂仅支持iOS平台；默认：10
                        },
                        placeholder: tempName,
                        placeholderStyles: {
                            color: '#c1c1c1', //字符串类型；占位文字颜色，支持rgb、rgba、#；默认：#696969
                            size: 15, //数字类型；占位文字大小；默认：13
                            marginL: 5,
                        },
                        fixedOn: api.frameName
                    }, function (ret, err) {

                        if (ret) {
                            if (!ret.msg || ret.msg == '') {
                                toastMiddle('您还没有输入内容！');
                                return false
                            }
                            const param = {
                                content: ret.msg,
                                toUserId: item.toUserId,
                                topicCommentId: item.topicCommonId,
                                topicId: item.topicId
                            }
                            fnPost(interfaces.CONTENT_MODULE.CIRCLE.COMMENTON_NEWS, param,
                                function (ret, err) {
                                    if (ret && ret.code === RESPONSE_OK) {
                                        toastMiddle('评论成功');
                                        vm.newsDetail.topic.commentNumber++;
                                        setTimeout(() => vm.initDetail(vm), 600)
                                        vm.sendUpdate()
                                    } else {
                                        toastBottom(ret ? ret.msg : '');
                                    }
                                }
                            );
                            inputField.close();
                            inputField.resignFirstResponder();
                        } else {
                            // alert(JSON.stringify(err));
                        }
                    });
                    inputField.becomeFirstResponder(function (ret, err) {
                        if (ret.status) {
                            // alert(JSON.stringify(ret));
                        } else {
                            // alert(JSON.stringify(err));
                        }
                    });
                },
                back() {
                    api.closeWin();
                },

                sendUpdate: function () {
                    api.sendEvent({
                        name: 'updateLikeOrComments',
                        extra: {
                            topicId: vm.topicId,
                            likeNumber: vm.newsDetail.topic.likeNumber,
                            commentNumber: vm.newsDetail.topic.commentNumber,
                            likeFlag: vm.newsDetail.topic.likeFlag,
                        }
                    });
                },

                sendAtt: function (attentionFlag) {
                    api.sendEvent({
                        name: 'updateUserAttention',
                        extra: {
                            userId: vm.newsDetail.topic.userId,
                            attentionFlag: attentionFlag
                        }
                    });
                },

                /**
                 * 视频预览
                 * @param item
                 * @param index
                 */
                    videoPreview: function (item, index) {
                    let _this = this
                    if (!item.videoPath){
                        common("getVideoPlay")(item.videoId, function (ret) {
                            let videoData = ret.data
                            if (videoData && videoData.playInfoList.length > 0){
                                let playUrl = videoData.playInfoList[0].playURL
                                api.openVideo({
                                    url: playUrl
                                });
                            }else {
                                // toastMiddle('视频转码中！')
                                return false
                            }
                        })
                    }else {
                        api.openVideo({
                            url: item.videoPath
                        });
                    }
                },
            },
        })
        api.setRefreshHeaderInfo({
            bgColor: '#f7f7f7',
            textDown: '下拉更新有惊喜',
            textUp: '松开可以刷新'
        }, function (ret, err) {
            vm.initDetail();
            api.refreshHeaderLoadDone()
        });

        api.addEventListener({
            name: 'eventCircleClosePhoto'
        }, function (ret, err) {
            if (document.getElementById("bp_container")) {
                vm.viodePreview.close()
            }
            photoBrowser.close();
        });

    }
</script>
</body>

</html>
